*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.aa{
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    position: fixed;
    font-size:0 ;
}
.a {
    width: 20px;
    height: 100px;
    background: red;
    display: inline-block;
    margin-right: 10px;
    animation-name: move;
    animation-timing-function:ease;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration:0.5s;
}
@keyframes move {
    0% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}
.a2{
    animation-delay:0.1s ;
}
.a3{
    animation-delay:0.2s ;
}
.a4{
    animation-delay:0.3s ;
}
.a5{
    animation-delay:0.4s ;
}
.a6{
    animation-delay:0.5s ;
}
.a7{
    animation-delay:0.6s ;
}
.a8{
    animation-delay:0.7s ;
}
.a9{
    animation-delay:0.8s ;
}
.a10{
    animation-delay:0.9s ;
}